﻿@model HyEduOnline.Entities.TbStudents
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>个人信息</title>

    <meta content="" name="description">
    <meta content="" name="author">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">

    <link href="~/CSS/font-awesome.min.css" media="screen" type="text/css" rel="stylesheet" />
    <link href="~/CSS/smartadmin-production.css" media="screen" type="text/css" rel="stylesheet" />
    <link href="~/CSS/smartadmin-skins.css" media="screen" type="text/css" rel="stylesheet" />
    <link href="~/CSS/demo.css" media="screen" type="text/css" rel="stylesheet" />

    <link rel="shortcut icon" href="/img/favicon/favicon.ico" type="image/x-icon">
    <link rel="icon" href="/img/favicon/favicon.ico" type="image/x-icon">

    <link href="~/CSS/bootstrap.min.css" rel="stylesheet" />
    <link href="~/CSS/bootstrap-editable.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>

    <script src="~/Js/bootstrap/bootstrap.min.js"></script>


    <script src="~/Js/bootstrap/bootstrap-editable.js"></script>
    <script src="~/Scripts/knockout/knockout-2.2.0.js"></script>
    <script src="~/Js/plugin/jquery-form/jquery-form.min.js"></script>

    <!--Jcrop-->
    <link href="~/CSS/Jcrop/crop.min.css" rel="stylesheet" />
    <link href="~/CSS/Jcrop/fineuploader.css" rel="stylesheet" />
    <link href="~/CSS/Jcrop/jquery.Jcrop.min.css" rel="stylesheet" />


    <script src="~/Scripts/Jcrop/jquery.fineuploader-3.1.min.js"></script>
    <script src="~/Scripts/Jcrop/jquery.Jcrop.min.js"></script>
    <script src="~/Scripts/Jcrop/crop.js"></script>


   <style type="text/css">
        .tImg {
            border: 5px solid #fff;
            border-radius: 0;
            display: inline-block;
            left: 10px;
            margin-bottom: -30px;
             max-width: 100px;
             position: relative;
             text-align: right;
             top: -30px;
             z-index: 4;
        }
    </style>
</head>
<body>
    <div class="row">
        <div class="col-sm-12" style="height: 100px; background: url(/img/demo/s3.jpg);">            
        </div>
        <div class="col-sm-12">
            <div class="col-sm-3 profile-pic">
                <a href="#myModal" data-toggle="modal">

                     @{                                                
                         string ImgUrl = (string.IsNullOrEmpty(Model.SPicUrl) ? "/Images/headpic.png" : Model.SPicUrl);                      
                    }
                     <img src="@ImgUrl" class="tImg"/>
                </a>
                <div class="padding-10">
                    <input type="hidden" id="Id" value="@Model.Id"/>
                    <h4 class="font-md">
                        <strong>@Html.DisplayFor(model => model.SNo)</strong>
                    </h4>
                </div>
            </div>
            <div class="col-sm-6">
                <h1>
                    <span class="semi-bold">姓名:@Html.DisplayFor(model => model.SName)</span>
                    <br>
                    <small>学院:@Html.DisplayFor(model => model.SColleName)</small><br />
                    <small>专业:@Html.DisplayFor(model => model.SProName)</small><br />
                    <small>班级:@Html.DisplayFor(model => model.SClassName)</small>
                </h1>
                <ul class="list-unstyled">
                    <li>
                        <p class="text-muted">
                            <i class="fa fa-phone"></i>
                            <span class="txt-color-darken">电话:<a id="SPhone" >@Html.DisplayFor(model => model.SPhone)</a></span>
                        </p>
                    </li>
                    <li>
                        <p class="text-muted">
                            <i class="fa fa-envelope"></i>
                            <span class="txt-color-darken">邮箱:<a id="SEmail" >@Html.DisplayFor(model => model.SEmail)</a></span>
                        </p>
                    </li>
                    <li>
                        <p class="text-muted">
                            <i class="fa fa-linux "></i>
                            <span class="txt-color-darken">qq:<a id="SQq" >@Html.DisplayFor(model => model.SQq)</a></span>
                        </p>
                    </li>
                </ul>
                <br>
                <p class="font-md">
                    <i>个人介绍:</i>
                </p>
                <p><a id="SIntro" >@Html.Raw(Model.SIntro)</a></p>
                <br>
            </div>
        </div>
    </div>

    <!--头像上传和修改-->
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: 600px; margin: 2% auto; overflow: hidden; height: 550px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 id="myModalLabel"><strong>修改头像</strong></h4>
            </div>
            <div class="modal-body" style="height: 600px;">

                <div id="jquery-wrapped-fine-uploader"></div>
                <div id="message"></div>
                <div id="crop_wrap">
                    <div id="crop_holder">
                        <div id="crop_area" class="border">
                            <img id="crop_image" alt="" src="" class="preview-image" />
                        </div>
                        <div id="preview_area">
                            <div id="preview_title">当前头像</div>
                            <div id="preview_large_text" class="preview-text">100px × 100px</div>
                            <div id="preview_large_wrap" class="border">
                                <img id="preview_large" alt="" src="" class="preview-image" style="" />
                            </div>
                        </div>
                    </div>
                    <div id="crop_operation" style="display: none;">
                        <form id="form_crop" action="/Api/Common/CutStuImage" method="post" name="form_crop">
                            <input type="hidden" name="x" id="x">
                            <input type="hidden" name="y" id="y">
                            <input type="hidden" name="w" id="w">
                            <input type="hidden" name="h" id="h">
                            <input type="hidden" name="imgsrc" id="imgsrc">
                            <input id="crop_operation_submit" name="crop_operation_submit" type="submit" value="裁切并保存" /><span id="crop_operation_msg" style="display: none" class="green"></span>
                        </form>
                    </div>
                    <div id="croped_message" class="green"></div>
                </div>

            </div>
        </div>
    </div>





    <script type="text/javascript">

        $(function () {

            $.fn.editable.defaults.mode = 'inline';
            $("#SPhone").editable({
                url: '/Api/Student/StuUpdate',
                type: 'text',
                name: 'SPhone',
                pk: $("#Id").val(),
                ajaxOptions: { dataType: 'json' },
                validate: function (value) {
                    var mobile = new RegExp(/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/);
                    var tel = new RegExp(/^\d{3,4}-?\d{7,9}$/);
                    if (!(mobile.test(value) || tel.test(value)))
                        return "请输入正确的号码"
                }
            });
            $("#SEmail").editable({
                url: '/Api/Student/StuUpdate',
                type: 'text',
                name: 'SEmail',
                pk: $("#Id").val(),
                ajaxOptions: { dataType: 'json' },
            });
            $("#SQq").editable({
                url: '/Api/Student/StuUpdate',
                type: 'text',
                name: 'SQq',
                pk: $("#Id").val(),
                ajaxOptions: { dataType: 'json' },
                validate: function (value) {
                    var QQ = new RegExp(/^[1-9]\d{4,9}$/);
                    if (!QQ.test(value))
                        return "请输入正确的QQ号码"
                }
            });
            $("#SIntro").editable({
                url: '/Api/Student/StuUpdate',
                type: 'textarea',
                name: 'SIntro',
                pk: $("#Id").val(),
                ajaxOptions: { dataType: 'json' },
            });

        });

    </script>
</body>
</html>
